<template>
  <div id="todo-box">
    <div class="todo-title">
      <span>待办事项</span>
      <Badge text="8"></Badge>
      <span class="more">更多</span>
    </div>
    <!-- <div class="wrapper"> -->
      <!-- <ul class="todo-item-box content" ref="wrapper"> -->
        <slider>
          <div class="todo-item">1</div>
          <div class="todo-item">2</div>
          <div class="todo-item">3</div>
        </slider>
      <!-- </ul> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { Badge } from 'vux'
import Slider from '@/components/common/slider/slider'
import Scroll from '@/components/common/scroll/scroll'
export default {
  components: {
    Badge, Slider, Scroll
  }
  // methods: {
  // }
}
</script>

<style scope>
  #todo-box {
    background: rgb(255,255,255);
    height: 150px;
    width: 95%;
    margin: 10px auto;
    border-radius: 5px;
    overflow: hidden;
  }

  .todo-title {
    height: 34px;
    line-height: 34px;
    padding-left: 0.75rem;
    color: #555555;
    border-bottom: 1px solid #efefef;
    font-size: 0.8rem;
    position: relative;
  }

  .todo-title .more {
    position: absolute;
    right: 10px;
    text-decoration: underline;
    color: #1d69c2;
    font-size: 0.75rem;
  }

  .vux-badge {
    vertical-align: text-bottom !important;
  }

  .wrapper {
    /* width: 100%; */
    position: relative;
    overflow: hidden;
  }


  .todo-item-box {
    margin-top: 8px;
    display: inline-flex;
  }

  .todo-item {
    width: 100%;
    height: 95px;
    border-radius: 10px;
    background: cadetblue;
    float: left;
    list-style: none;
    margin: 0 auto;
  }
</style>
